import { useState } from 'react';
import { Input, Modal } from 'antd';
import { observer } from '@formily/react';
import { getMessage } from '@inbiz/react';
import { confirmWithDraw } from '../../../OutFunction';
import './index.less';

export default observer((props: any) => {
  const { visible, $visible, instanceId, inbiz, operationSuccess } = props;
  const [instanceNumber, $instanceNumber] = useState('');

  return (
    <Modal
      title={getMessage('processButton.modalTitleTips')}
      visible={visible}
      onCancel={() => $visible(false)}
      onOk={() => confirmWithDraw({ instanceId, inbiz, operationSuccess, instanceNumber })}
      destroyOnClose
      width={600}
    >
      <div style={{ marginBottom: 10 }}>{`${getMessage(
        'processButton.inputcompleteInstance',
      )}: "${instanceId}"${getMessage('processButton.confirmToWithdraw')}`}</div>
      <Input onChange={(e) => $instanceNumber(e.target.value)} />
    </Modal>
  );
});
